<template>
  <!--模板-->
  <el-table style="width: 100%" height="650"
    ref="gridDom"
    :data="arrItem"
  >
    <el-table-column label="字段" prop="colName" />
    <el-table-column label="名称" prop="label" />
    <el-table-column label="修改" :width="60">
      <el-button type="primary" :icon="Edit" circle/>
    </el-table-column>
     <el-table-column label="联动" :width="60">
      <el-button type="primary" :icon="Connection" circle/>
    </el-table-column>
    <el-table-column label="验证" >
      <template #default="scope">
        <el-button type="" circle> {{ (formMeta.formMeta.ruleMeta[scope.row.columnId]) ? "有":"-" }}</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script lang="ts">
/* eslint-disable vue/no-setup-props-destructure */
  import { defineComponent, reactive, watch, ref } from 'vue'
  import { ElTable, ElTableColumn, ElButton } from 'element-plus'
  import { Edit, Paperclip, Connection } from '@element-plus/icons-vue'

  export default defineComponent({
    name: 'nf-meta-help-form-item-list',
    components: {
      Edit,
      ElTable, ElTableColumn, ElButton
    },
    props: {
      formMeta: [Object]
    },
    setup(props, context) {

      const { formMeta } = props
      const gridDom = ref(null)

      const arrItem = reactive([])

      watch(formMeta.itemMeta, () => {
        arrItem.length = 0
        for (const key in formMeta.itemMeta) {
          const item = formMeta.itemMeta[key].formItemMeta
          arrItem.push(item)
        }
      }, {immediate: true})
      
      return {
        Edit,
        Paperclip,
        Connection,
        arrItem,
        gridDom
      }
    }
  })
</script>